<template>
<div>
    <div class="banner" @click="handleClick">
        <img class="img" src="//img1.qunarzz.com/sight/p0/2006/79/7941d4e788e10832a3.img.jpg_600x330_474c2fe2.jpg" alt="">
        <div class="banner-info">
            <div class="banner-title">eeeeeeee</div>
            <div class="banner-number"><span class="iconfont">&#xe632;</span>29</div>
        </div>
    </div>
    <CommonGallary 
        :imgs = "imgs" 
        v-show="showGallary"
        @close = "handleClose"
        ></CommonGallary>
</div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
    name:'Banner',
    data () {
        return{
            showGallary: false,
            imgs:['http://img1.qunarzz.com/sight/p0/1709/28/288fbeccc335f774a3.img.jpg_350x240_078c24f3.jpg',
              'http://img1.qunarzz.com/sight/p0/1709/b9/b94a5b5eaea33db4a3.img.jpg_r_800x800_ef1252bf.jpg']
        }
    },
    methods: {
        handleClick(){
            this.showGallary = true
        },
        handleClose(){
            this.showGallary = false
        }
    },
    components:{
        CommonGallary
    }
    
}
</script>
 
<style lang="stylus" scoped>
    .banner
        overflow: hidden
        height:0
        padding-bottom:55%
        position:relative
        .img
            width:100%
        .banner-info
            display:flex
            position:absolute
            left:0
            right:0
            bottom:0
            color:#fff
            line-height :.6rem
            background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.8))
            .banner-title
                flex:1
            .banner-number
                padding:0 0.4rem
                height: .4rem
                color:#fff
                line-height: .4rem
                border-radius: .2rem
                background: rgba(0,0,0,0.8)
        
    
</style>